<template>
        <div class="main">
                <div v-if="ready" class="search">
                        <div class="elementsSelecter">
                                <h1>检索查询</h1>
                                <div class="elementsSelect">
                                        <div class="basicSelecter">

                                        </div>
                                        <div v-for="el in elementsSelecter" ref="el" :data-id="el.id" :key="el.id"
                                                class="addElement">
                                                <div class="logicMark">
                                                        <el-select v-model="el.logicMark" placeholder="请选择">
                                                                <el-option v-for="item in logicMarkList" :key="item.id"
                                                                        :label="item.name" :value="item.value">
                                                                </el-option>
                                                        </el-select>
                                                </div>
                                                <div class="elementName">
                                                        <el-cascader clearable :show-all-levels="false" filterable
                                                                v-model="el.elementName" :options="elementOptions"
                                                                :props="{ expandTrigger: 'hover', emitPath: false }">
                                                        </el-cascader>
                                                </div>
                                                <el-input class="elementInput" v-model="el.elementValue"
                                                        placeholder="请输入字段的值"></el-input>
                                                <el-button @click="reduceElement(el.id)">
                                                        -
                                                </el-button>
                                        </div>
                                        <el-button @click="addElement"> + </el-button>
                                </div>
                                <div class="elementsBtn">
                                        <el-button @click="cleanAllElement" type="danger">清除所有</el-button>
                                        <el-button @click="search" v-loading="isSearching" type="success">查询匹配条目数</el-button>
                                        <div class="tips">
                                                一共
                                                <em>{{ elementNumber }}</em>
                                                条
                                        </div>
                                </div>

                        </div>
                        <el-collapse class="collapse" v-model="activeCollapse" accordion>
                                <el-collapse-item title="展开选择你想要的数据" name="1">
                                        <div class="filter">
                                                <el-checkbox v-for="(item,index) in filterArray" @change="change(index)" v-model="item.status"
                                                        :key="item.id" :label="item.value">{{ item.label }}</el-checkbox>
                                        </div>
                                </el-collapse-item>
                        </el-collapse>
                        <div class="datas">
                                <el-table :data="tableDatas" tooltip-effect="dark" style="width: 100%" border>
                                                <el-table-column v-for="(item,index) in tableDatas" :label="Object.keys(item)[index]" :key="index" v-if="Object.keys(item).length > index">
                                                <div>{{Object.values(item)[index]}}</div>
                                                </el-table-column>
                                        <el-table-column label="操作">
                                                <el-button type="primary">添加到数据集</el-button>
                                        </el-table-column>

                                </el-table>
                                <div class="block">
                                        <el-pagination layout="prev, pager, next" :total="totalPage">
                                        </el-pagination>
                                </div>
                        </div>

                </div>
                <div v-else class="skeleton">
                        <el-skeleton animated style="width: 100%">
                                <template slot="template">
                                        <div>
                                                <el-skeleton-item variant="text" style="height:50px;width:40%" />
                                        </div>
                                        <div
                                                style="display: flex; align-items: center; justify-items: space-between; margin: 30px;">
                                                <el-skeleton-item variant="text" style="width: 30%;" />
                                                <el-skeleton-item variant="text" style="margin-left: 16px;" />
                                        </div>
                                        <div
                                                style="display: flex; align-items: center; justify-items: space-between; margin: 30px;">
                                                <el-skeleton-item variant="text" style="width: 30%;" />
                                                <el-skeleton-item variant="text" style="margin-left: 16px;" />
                                        </div>
                                        <div
                                                style="display: flex; align-items: center; justify-items: space-between; margin: 30px;">
                                                <el-skeleton-item variant="text" style="width: 30%;" />
                                                <el-skeleton-item variant="text" style="margin-left: 16px;" />
                                        </div>
                                        <div
                                                style="display: flex; align-items: center; justify-items: space-between; margin: 30px;">
                                                <el-skeleton-item variant="text" style="width: 30%;" />
                                                <el-skeleton-item variant="text" style="margin-left: 16px;" />
                                        </div>
                                        <div
                                                style="display: flex; width: 100%; justify-content: flex-end; margin: 30px 0 50px;">
                                                <el-skeleton-item variant="text"
                                                        style="height: 30px; width: 10%; margin: 0 20px;" />
                                                <el-skeleton-item variant="text" style="height: 30px; width: 10%;" />

                                        </div>
                                        <el-divider></el-divider>
                                        <div
                                                style="display: flex; width: 100%; justify-content: space-between; margin: 30px ;">
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />

                                        </div>
                                        <div
                                                style="display: flex; width: 100%; justify-content: space-between; margin: 30px ;">
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />

                                        </div>
                                        <div
                                                style="display: flex; width: 100%; justify-content: space-between; margin: 30px ;">
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />

                                        </div>
                                        <div
                                                style="display: flex; width: 100%; justify-content: space-between; margin: 30px ;">
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />
                                                <el-skeleton-item variant="text" style="height: 20px; width: 50px;" />

                                        </div>
                                </template>
                        </el-skeleton>
                </div>

        </div>
</template>
<script>
import Axios from 'axios';
import { element, filterArray } from './elements'

export default {
        data() {
                return {
                        isSearching:false,//搜索loading
                        ready: false,
                        elements: {},//存放元素及其值
                        elementsSelecter: [
                                {
                                        id: 1,
                                        logicMark: 'and',//and,or,not表示三种关系
                                        elementName: '',
                                        elementValue: '',
                                },
                        ],//选择器数组
                        elementList: [],
                        logicMarkList: [
                                {
                                        id: 1,
                                        name: 'and',
                                        value: 'and'
                                },
                                {
                                        id: 2,
                                        name: 'or',
                                        value: 'or'
                                },
                                {
                                        id: 3,
                                        name: 'not',
                                        value: 'not'
                                }
                        ],//逻辑符遍历数组
                        elementOptions: [],//实际筛选数据
                        elementNumber: 0,
                        filterArray: [],//复选框数组
                        tableDatas: [
                                { ref_doi: 'yinyong', ref_url: 'yinyong', remarks: '123' },
                                { ref_doi: 'yinyong', ref_url: 'yinyong', remarks: '123' },
                                { ref_doi: 'yinyong', ref_url: 'yinyong', remarks: '123' },
                                { ref_doi: 'yinyong', ref_url: 'yinyong', remarks: '123' },
                                { ref_doi: 'yinyong', ref_url: 'yinyong', remarks: '123' },
                        ],
                        tableNames: [],//表格名字
                        basicRequirement: ['create_time', 'update_time', 'remarks', 'ref_doi', 'ref_url', 'data_type', 'syn_method', 'target_product',],
                        Ev_che_react:{},
                        body:{},

                        //页数相关
                        page:0,//页数
                        totalPage:10,//总页数
                        count:15,//每一也的个数
                        activeCollapse:'',
                }
        },
        watch: {
                filterArray: {
                        handler(newName, oldName) {
                                // console.log(newName);
                                let arr = [];
                                for (let item in newName) {
                                        // console.log(item);
                                        if (newName[item].status === true) {
                                                arr.push(newName[item])
                                        }
                                }
                                this.tableNames = arr
                        },
                        deep: true,
                }
        },
        mounted() {
                this.elementOptions = element.elementOptions
                let itemArr = [];
                let id = 0;
                for (let item in element.elementOptions) {
                        if (element.elementOptions[item].children) {
                                for (let i = 0; i < element.elementOptions[item].children.length; i++) {
                                        this.$set(element.elementOptions[item].children[i], 'id', id++)
                                        if (element.elementOptions[item].children[i].value === 'create_time' || element.elementOptions[item].children[i].value === 'update_time' || element.elementOptions[item].children[i].value === 'remarks' || element.elementOptions[item].children[i].value === 'ref_doi' || element.elementOptions[item].children[i].value === 'ref_url' || element.elementOptions[item].children[i].value === 'data_type' || element.elementOptions[item].children[i].value === 'syn_method' || element.elementOptions[item].children[i].value === 'target_product') {
                                                this.$set(element.elementOptions[item].children[i], 'status', true)
                                        } else {
                                                this.$set(element.elementOptions[item].children[i], 'status', false)
                                        }
                                }
                                itemArr = itemArr.concat(element.elementOptions[item].children)//concat拼接数组 
                        }
                }
                //处理数组方便遍历      
                this.filterArray = itemArr;
                let that = this;
                setTimeout(() => {
                        that.ready = true;
                }, 0);


        },
        updated() {
                if (this.$refs.el[0].dataset.id === "1") {
                        this.$refs.el[0].children[0].style.opacity = 0
                        this.$refs.el[0].children[0].style.pointerEvents = 'none'
                        this.$refs.el[0].children[3].style.opacity = 0
                        this.$refs.el[0].children[3].style.pointerEvents = 'none'
                }
                //v-if在mounted（）时还未完全渲染，所以refs拿不到dom节点
        },
        methods: {
                test(){
                        console.log(this.tableDatas);
                },
                change(index) {
                        if(JSON.stringify(this.body) === "{}"){
                                this.$message.error('请先设置检索条件并进行一次筛选！')
                                return 0;
                        }
                        let names = []
                        for(let item in this.filterArray){
                                if(this.filterArray[item].status === true){
                                        names.push(this.filterArray[item].value)
                                }
                        }
                        console.log(this.body);
                        console.log(names.toString());
                        this.basicRequirement = names.toString()
                        this.searchUpdate(this.Ev_che_react,this.page,this.count);


                },
                reduceElement(id) {
                        this.elementsSelecter = this.elementsSelecter.filter(el => {
                                return el.id !== id;
                        })
                },
                addElement() {
                        //push引用对象的时候，由于进栈的是引用地址，导致最后会出错

                        let arr = JSON.parse(JSON.stringify(this.elementsSelecter))
                        let id = arr[arr.length - 1].id + 1;
                        let obj = {
                                id,
                                logicMark: '',//and,or,not表示三种关系
                                elementName: '',
                                elementValue: '',
                        }
                        arr.push(obj);
                        this.elementsSelecter = arr;

                        // this.elementsSelecter.push(JSON.parse(JSON.stringify(obj)))
                        // this.elementsSelecter.sort( (a,b)=>{
                        //         return a.id - b.id;
                        // })
                        //vue2不监控数组引用类型变化，所以这种写法不能进行响应式改变，应该每次新建一个数组      
                },
                cleanAllElement() {
                        let arr = [];
                        let obj = {
                                id: 1,
                                logicMark: 'and',
                                elementName: '',
                                elementValue: '',
                        }
                        arr.push(obj)
                        this.elementsSelecter = arr;
                },
                search() {
                        // 基础显示条件
                        let combine = ''
                        let lastNode = undefined;

                        console.log(this.elementsSelecter);
                        //过滤筛选条件
                        if (this.elementsSelecter[0].elementName === "" && this.elementsSelecter[0].elementValue === "" && this.elementsSelecter.length === 1) {
                                this.$message.error("请输入筛选条件！")
                                return 0;
                        }
                        for (let item in this.elementsSelecter) {
                                let el = this.elementsSelecter[item]
                                let oldEl = this.elementsSelecter[item - 1]
                                if (el.logicMark === "and") {
                                        this.Ev_che_react[el.elementName] = el.elementValue;
                                } else if (el.logicMark === "or") {
                                        if (oldEl === lastNode) {
                                                combine += `|${el.elementName}`
                                                lastNode = el;
                                        } else if (oldEl !== lastNode) {
                                                lastNode = el;
                                                combine += `|${el.elementName},|${oldEl.elementName},`

                                        }
                                } else if (el.logicMark === 'not') {
                                        this.Ev_che_react[`${el.elementName}!`] = el.elementValue;
                                } else {
                                        this.$message.error('请补全逻辑符！')
                                        return 0;
                                }

                        }
                        this.Ev_che_react['@column'] = this.basicRequirement.toString();
                        if (combine !== '') {
                                this.Ev_che_react['@combine'] = combine;
                        }
                        this.searchUpdate(this.Ev_che_react,this.page,this.count);
                },
                searchUpdate(Ev_che_react,page,count){
                        this.isSearching = true;
                        this.body = {
                                "[]": {
                                        Ev_che_react,
                                        page,
                                        count,
                                        query: 2,
                                },
                                "total@": "/[]/total"
                        }
                        Axios.post('http://c7.cabc.top:8209/get', this.body)
                                .then(res => {
                                        this.isSearching = false;
                                        if (res.data.code === 200) {
                                                this.tableDatas = res.data['[]']
                                                let arr = [];
                                                for (let item in res.data['[]']) {
                                                        arr.push(res.data['[]'][item].Ev_che_react)
                                                }
                                                this.tableDatas = arr;
                                        }else{
                                                this.$message.error('参数错误！请查询文档')
                                        }

                                }).catch(err => {
                                        this.isSearching = false;
                                        console.log(err);
                                        this.$message('error!')
                                })
                }
        },
}
</script>
<style scoped>
.skeleton {
        margin: 50px auto;
        width: 90%;
}

.main {
        width: 90%;
        margin: 50px auto;
}

.addElement {
        display: flex;
        justify-content: space-between;
        margin: 30px 0;
}

.elementName {
        width: 40%;
        display: flex;
        justify-content: center;
}

.elementName {
        margin: 0 20px;
}

.elementInput {
        margin-right: 20px;
}

.elementsBtn {
        display: flex;
        justify-content: flex-end;
        margin: 30px;
}

.tips {
        display: flex;
        justify-content: flex-end;
        font-size: larger;
        font-weight: 600;
        align-items: center;
        margin: 0 0 0 50px;
}

em {
        margin: 0 10px;
        color: green;
}


.filter {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        margin-left: 10px;

}

.datas {
        margin: 50px auto;
}
.elementsSelect{
        background-color: white;
        padding: 20px;
        border-radius: 5px;
}
</style>
    